<template>
    <div class="big">
        <div class="head">
            <div class="time">
                {{ dateYear }} {{ dateWeek }}
                <span>{{ dateDay }}</span>
            </div>
            <div class="big-title">新生报到数据大屏</div>
            <div class="exit" @click="notFull">
                <span>退出</span>
            </div>
        </div>
        <div class="echart">
            <div class="left">
                <div class="total">
                    <div class="total-num">
                        <div>
                            <span>激活人数</span>
                            <span>{{ jhjfcount + jfcount }}</span>
                        </div>
                        <div>
                            <span>缴费人数</span>
                            <span>{{ now_at }}</span>
                        </div>
                        <div>
                            <span>激活待缴费人数</span>
                            <span>{{ jhjfcount }}</span>
                        </div>
                        <div>
                            <span>线下报道人数</span>
                            <span>{{ checktotal }}</span>
                        </div>
                    </div>
                </div>
                <div class="num">
                    <div>
                        <span>总人数</span>
                        <span>{{ need_at }}</span>
                    </div>
                    <div>
                        <span>激活率</span>
                        <span>{{ isNaN((jhjfcount + jfcount) / need_at) ? '0%' : Math.round(((jhjfcount + jfcount) /
                    need_at) * 10000) / 100 + '%' }}</span>

                    </div>
                    <div>
                        <span>缴费率</span>
                        <span>{{ isNaN(jfcount / need_at) ? '0%' : Math.round((jfcount / need_at) * 10000) / 100 + '%'
                            }}</span>

                    </div>
                </div>
                <div class="time-echart">
                    <div id="time"></div>
                </div>
            </div>
            <div class="center">
                <div class="area-echart">
                    <div class="echart-title">学生报到交通方式</div>
                    <div class="table">
                        <!-- <table>
                            <tbody>
                                <tr>
                                    <td>校区</td>
                                    <td>交通方式</td>
                                    <td>人数</td>
                                </tr>
                                <tr v-for="(item, index) in atStationByCampusList" :key="index">
                                    <td>{{ item.xq }}</td>
                                    <td>{{ item.tooltype }}</td>
                                    <td>{{ item.totalnum }}</td>
                                </tr>
                            </tbody>
                        </table> -->
                        <table v-for="(item, index) in atStationByCampusList"">
                            <thead>
                                <th>{{ item.xq }}</th>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>交通方式</td>
                                    <td>人数</td>
                                </tr>
                                <tr v-for=" (num, index) in item.rows" :key="index">
                            <td>{{ num.tooltype }}</td>
                            <td>{{ num.totalnum }}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <!-- <div id="area"></div> -->
                </div>
                <div class="top10-echart">
                    <div id="top10"></div>
                </div>
            </div>
            <div class="right">
                <div class="registration-num-echart">
                    <div id="registration-num"></div>
                </div>
                <div class="status-echart">
                    <div id="status"></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { nowTime } from '../../../utils/index.js';

import { countStatus } from "@/api/stureg/reg";
import { countDept, transportationWay, countHour, countMajorTop10, countNowAt, countGender } from "@/api/stureg/regcount";

import { isEmpty } from "@/api/helpFunc";

export default {
    dicts: ['srs_stu_reg_status'],
    data() {
        return {
            timing: null,
            dateDay: null,
            dateYear: null,
            dateWeek: null,
            weekday: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
            now_at: 0,
            checktotal: 0,
            need_at: 0,
            jhjfcount: 0,
            jfcount: 0,
            jhcount: 0,
            atStationByCampusList: []//学生交通方式数据
        }
    },
    created() {
        this.countNowAt();
    },
    mounted() {
        this.doFull();
        this.countHour();
        this.transportationWay();
        this.countMajorTop10();
        this.registration();
        this.status();
        this.timeFn();
        this.startDataRefresh(); // 启动数据刷新定时器
        window.addEventListener('resize', this.handleResize);
    },
    beforeDestroy() {
        clearInterval(this.timing)
        clearInterval(this.dataRefreshTiming); // 清除数据刷新定时器
    },
    methods: {
        doFull() {
            this.$store.dispatch('app/toggleSideBarHide', true);
            document.querySelector('.navbar').style.display = "none";
            document.querySelector('.tags-view-container').style.display = "none";
        },
        notFull() {
            this.$store.dispatch('app/toggleSideBarHide', false);
            document.querySelector('.navbar').style.display = "block";
            document.querySelector('.tags-view-container').style.display = "block";
        },
        async countNowAt() {
            let res = await countNowAt();
            if (res.code == 200) {
                if (!isEmpty(res.data)) {
                    this.now_at = res.data.now_at;
                    this.need_at = res.data.need_at;
                    this.checktotal = res.data.checktotal;
                }
            }

        },
        createChart(chartId, option) {
            const chart = this.$echarts.init(document.getElementById(chartId));
            chart.setOption(option);
        },
        async countHour() {
            let time_list = [];
            let total = [];
            let res = await countHour();
            if (res.code == 200) {
                let data = [...res.data];
                data.map(x => {
                    time_list.push(x.hours);
                    total.push(x.bdtotal);
                });
            }
            const option = {
                title: {
                    text: '学生报到时间段分布',
                    top: '15',
                    textStyle: {
                        color: "#ffffff",
                        fontSize: 18
                    }
                },
                tooltip: {
                    axisPointer: {
                        type: 'shadow' // 设置为阴影
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: [...time_list]
                },
                yAxis: {
                    type: 'value',
                    nameLocation: "middle",
                    nameTextStyle: {
                        align: 'left',
                        lineHeight: 60,

                    },
                    splitLine: {
                        lineStyle: {
                            color: '#ffffff',
                            opacity: 0.3
                        }
                    }
                },
                series: [
                    {
                        smooth: true,
                        data: [...total],
                        type: 'line',
                        label: {
                            color: "white"
                        },
                        itemStyle: {
                            color: "#46B4B4"
                        },
                        areaStyle: {
                            color: "#154A89",
                            opacity: 0.5,
                        },
                        lineStyle: {
                            color: "#5FD5EC"
                        }
                    }
                ]
            };
            this.createChart('time', option);

        },
        async transportationWay() {

            let areaData = [];
            let res = await transportationWay();
            if (res.code == 200) {
                areaData = [...res.data];
                let processed = [];
                let currentXq = null;
                let group = null;
                areaData.forEach(item => {
                    if (currentXq === null || currentXq !== item.xq) {
                        // 开始新组  
                        group = { xq: item.xq, rows: [], firstRow: true };
                        processed.push(group);
                        currentXq = item.xq;
                    }
                    // 将当前项添加到当前组中  
                    group.rows.push(item);
                })
                this.atStationByCampusList = processed;
                console.log(this.atStationByCampusList)
                // this.atStationByCampusList = areaData;
                // areaData = areaData.map(x => {
                //     return {
                //         name: x.tooltype,
                //         value: x.totalnum,
                //         // Campus:x.
                //     }
                // });
            }

            // const option = {
            //     title: {
            //         text: '学生报到交通方式',
            //         top: '25',
            //         left: '25',
            //         textStyle: {
            //             color: "#ffffff",
            //             fontSize: 18
            //         }
            //     },
            //     legend: {
            //         type: 'scroll',
            //         pageIconColor: '#ffffff',  // 翻页按钮的颜色
            //         pageTextStyle: {
            //             color: '#ffffff'  // 翻页文本的颜色
            //         },

            //         pageIconInactiveColor: '#aaa',
            //         bottom: 30,
            //         textStyle: {
            //             color: '#ffffff',
            //             fontSize: 14
            //         },
            //     },
            //     tooltip: {
            //         axisPointer: {
            //             type: 'shadow' // 设置为阴影
            //         }
            //     },
            //     toolbox: {
            //         show: true,
            //         feature: {
            //             mark: { show: true },
            //             dataView: { show: true, readOnly: false },
            //             restore: { show: true },
            //             saveAsImage: { show: true }
            //         }
            //     },
            //     series: [
            //         {
            //             // name: 'Nightingale Chart',
            //             type: 'pie',
            //             radius: ['20%', '65%'],
            //             center: ['50%', '50%'],
            //             roseType: 'area',
            //             itemStyle: {
            //                 borderRadius: 8
            //             },
            //             data: [
            //                 ...areaData
            //             ]
            //         }
            //     ]
            // };
            // this.createChart('area', option);

        },
        async countMajorTop10() {
            let major_list = [];
            let num_list = [];
            let res = await countMajorTop10();
            if (res.code == 200) {
                let data = [...res.data];
                data.map(x => {
                    major_list.push(x.major_name);
                    num_list.push(x.jftotal);
                });
            }

            const option = {
                title: {
                    text: '专业缴费人数Top10',
                    top: '10',
                    left: '25',
                    textStyle: {
                        color: "#ffffff",
                        fontSize: 18
                    }
                },
                grid: {
                    bottom: '30%'
                },
                tooltip: {
                    axisPointer: {
                        type: 'shadow' // 设置为阴影
                    }
                },
                xAxis: {
                    type: 'category',
                    data: [...major_list],
                    axisLabel: {
                        rotate: 45,
                        color: "white",
                        fontSize: 12,
                        formatter: function (value) {
                            if (value.length > 8) {
                                return value.substring(0, 5) + '...'; // 只显示前10个字符并添加省略号
                            } else {
                                return value;
                            }
                        }
                    }
                },
                yAxis: {
                    type: 'value',

                    axisLabel: {
                        color: "white",
                        fontSize: 14,

                    },
                    splitLine: {
                        lineStyle: {
                            color: '#ffffff',
                            opacity: 0.3
                        }
                    }
                },
                series: [
                    {
                        data: [...num_list],
                        type: 'bar',
                        itemStyle: {
                            color: function (params) {
                                var colorList = ['#4A90E2', '#50E3C2', '#5EABE1', "#7ED321", "#57D9E3"];
                                return colorList[params.dataIndex % colorList.length];
                            }
                        }
                    }
                ]
            }
            this.createChart('top10', option);
        },
        async registration() {
            let dept_list = [];
            let num_list = [];
            let res = await countDept();
            if (res.code == 200) {
                let data = [...res.data];
                data.map(x => {
                    dept_list.push(x.dept_name);
                    num_list.push(x.jftotal);
                });
            }

            const option = {
                title: {
                    text: '各院系新生缴费人数',
                    top: '25',
                    left: '25',
                    textStyle: {
                        color: "#ffffff",
                        fontSize: 18
                    }
                },
                tooltip: {
                    axisPointer: {
                        type: 'shadow' // 设置为阴影
                    }
                },
                xAxis: {
                    type: 'value',
                    axisLine: {
                        onZero: false // 确保x轴从左到右排列
                    },
                    axisLabel: {
                        color: "white",
                        fontSize: 14,
                    },
                    boundaryGap: false, // 确保数据完全显示，不留空白
                    splitLine: {
                        lineStyle: {
                            color: '#ffffff',
                            opacity: 0.3
                        },
                    }
                },
                yAxis: {
                    type: 'category',
                    data: [...dept_list], // 这里填入你的数据
                    axisLabel: {
                        color: "white",
                        fontSize: 14,
                    },
                },
                series: [{
                    type: 'bar',
                    itemStyle: {
                        color: "#129BFF"
                    },
                    data: [...num_list],
                }],
                grid: {
                    left: 0,
                    bottom: '10%',
                    containLabel: true, // 确保标签在网格内显示，防止被遮挡
                },
            }
            this.createChart('registration-num', option);
        },
        async status() {
            let res = await countStatus();
            if (res.code == 200) {
                let data = { ...res.data };
                let dictData = this.dict.type.srs_stu_reg_status;
                let sum = 0;
                let sdata = [];
                for (let key in data) {
                    sum += data[key];
                    dictData.map(x => {
                        if (x.value == key) {
                            sdata.push({
                                name: x.label,
                                value: data[key]
                            });
                        }
                    });
                    this.jhjfcount = data[2]
                    this.jfcount = data[1]
                }
                let status_list = dictData.map(x => x.label);

                let genderData = [];
                let res1 = await countGender();
                if (res1.code == 200) {
                    genderData = [...res1.data];
                }

                const option = {
                    title: [
                        {
                            text: '学生状态',
                            textStyle: {
                                color: "#ffffff",
                                fontSize: 18
                            },
                            top: 15,
                            left: 25,
                        },
                        {
                            subtext: '学生缴费状态',
                            left: '25%',
                            bottom: 80,
                            subtextStyle: {
                                color: "#ffffff",
                                fontSize: 14
                            },
                            textAlign: 'center'
                        },
                        {
                            subtext: '学生男女比例',
                            subtextStyle: {
                                color: "#ffffff",
                                fontSize: 14
                            },
                            left: '75%',
                            bottom: 80,
                            textAlign: 'center'
                        },
                    ],
                    tooltip: {
                        axisPointer: {
                            type: 'shadow' // 设置为阴影
                        }
                    },
                    legend: {
                        show: true,
                        icon: "circle",
                        top: 55,
                        left: 20,
                        textStyle: {
                            color: '#ffffff',
                            fontSize: 14
                        },
                        data: status_list  // 图例只显示第一个饼图的名称
                    },
                    series: [
                        {
                            type: 'pie',
                            radius: ['30%', '40%'],
                            center: ["25%", "50%"],
                            label: {
                                show: false
                            },
                            data: [
                                ...sdata
                            ],
                        },
                        {
                            type: 'pie',
                            radius: '40%',
                            center: ["75%", "50%"],
                            itemStyle: {
                                color: function (params) {
                                    var colorList = ['#5470C6', '#EE6666'];
                                    return colorList[params.dataIndex];
                                }
                            },
                            label: {
                                position: "inside",
                                color: "#fff",
                                fontStyle: "oblique",
                                fontWeight: "bolder",

                            },
                            data: [
                                ...genderData
                            ],
                        }
                    ]
                }
                this.createChart('status', option);
            }
        },
        handleResize() {
            this.$echarts.getInstanceByDom(document.getElementById('time')).resize();
            this.$echarts.getInstanceByDom(document.getElementById('area')).resize();
            this.$echarts.getInstanceByDom(document.getElementById('top10')).resize();
            this.$echarts.getInstanceByDom(document.getElementById('registration-num')).resize();
            this.$echarts.getInstanceByDom(document.getElementById('status')).resize();
        },
        timeFn() {
            this.timing = setInterval(() => {
                this.dateDay = nowTime(new Date(), 'HH: mm: ss')
                this.dateYear = nowTime(new Date(), 'yyyy-MM-dd')
                this.dateWeek = this.weekday[new Date().getDay()]
            }, 1000)
        },
        startDataRefresh() {
            this.dataRefreshTiming = setInterval(() => {
                this.countNowAt();
                this.countHour();
                this.transportationWay();
                this.countMajorTop10();
                this.registration();
                this.status();
            }, 600000);
        },
    }
}
</script>

<style lang="scss" scoped>
.big {
    margin: 0px;
    background: url("~@/assets/big/bg.png") no-repeat;
    background-size: 100% 100%;
    min-height: 100vh;
    width: 100%;
    color: white;
    padding-bottom: 50px;

    .head {
        display: flex;
        padding: 10px 20px;
        justify-content: space-between;
        align-items: center;

        div:nth-child(1) {
            color: #45A2FF;
        }

        .time span {
            color: white;
        }

        div:nth-child(2) {
            font-size: 44px;
            font-weight: bold;
        }

        .big-title {
            margin-right: 125px;
        }

        .exit {
            background: url("~@/assets/big/button.png") no-repeat;
            background-size: 100% 100%;
            width: 81px;
            height: 36px;
            cursor: pointer;
            text-align: center;
            line-height: 36px;
        }
    }

    .echart {
        display: flex;
        padding: 20px;

        &>div {
            height: 800px;
            flex: 1;

            &>div {
                align-items: flex-end;
                justify-content: center;
            }
        }

        .left {
            .total {
                background: url("~@/assets/big/border-left-one.png") no-repeat;
                background-size: 100% 100%;
                display: flex;
                flex-direction: column;
                width: 100%;
                height: 250px;
                align-items: center;
                justify-content: center;
                font-size: 22px;
                padding: 20px;
                box-sizing: border-box;

                .total-num {
                    display: flex;
                    flex-direction: column;
                    width: 100%;
                    padding: 20px;

                    div {
                        display: flex;
                        justify-content: space-between;
                        width: 100%;
                        margin-bottom: 10px;
                        align-items: center;

                        span {
                            &:first-child {
                                text-align: left;
                                flex: 1;
                            }

                            &:last-child {
                                color: #EE6666;
                                font-weight: bold;
                                font-size: 30px;
                                margin-top: 8px;
                                text-align: right;
                            }
                        }
                    }
                }
            }


            .num {
                display: flex;

                &>div {
                    display: flex;
                    flex-direction: column;
                    flex: 1;
                    height: 240px;
                    align-items: center;
                    justify-content: center;
                    font-size: 18px;

                    span:last-child {
                        font-size: 40px;
                        margin-top: 10px;

                    }

                    &:first-child {
                        background: url("~@/assets/big/border-left-three.png") no-repeat;
                        background-size: 100% 100%;

                    }

                    &:nth-child(2) {
                        background: url("~@/assets/big/border-left-two.png") no-repeat;
                        background-size: 100% 100%;
                    }

                    &:last-child {
                        background: url("~@/assets/big/border-left-three.png") no-repeat;
                        background-size: 100% 100%;
                    }

                }
            }

            .time-echart {
                height: 385px;
                background: url("~@/assets/big/border-left-one.png") no-repeat;
                background-size: 100% 100%;
                display: flex;
                align-items: flex-end;
                justify-content: center;

                #time {
                    height: 95%;
                    width: 90%
                }
            }
        }

        .center {
            .area-echart {
                background: url("~@/assets/big/border-center-one.png") no-repeat;
                background-size: 100% 100%;
                height: 495px;
                padding: 40px 0 0 40px;

                .echart-title {
                    font-weight: bold;
                    font-size: 18px;
                }

                .table {
                    max-height: 90%;
                    overflow-y: auto;

                    table {
                        thead {
                            height: 35px;
                            line-height: 35px;
                            font-size: 18px;
                        }

                        width: 95%;
                        margin:15px 0;
                        border-collapse: collapse;
                        font-size: 1.1rem;
                    }

                    &::-webkit-scrollbar {
                        display: none;
                    }

                    tr {
                        display: flex;
                        line-height: 28px;

                        td {
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            flex: 1;
                            text-align: center;
                        }
                    }

                    tr:first-child {
                        color: #3E9DFF;
                        font-weight: bold;
                    }

                    tr:not(:first-child) {
                        font-size: 0.9rem;
                    }
                }
            }

            .top10-echart {
                height: 370px;
                background: url("~@/assets/big/border-center-two.png") no-repeat;
                background-size: 100% 100%;
                display: flex;
                align-items: flex-end;
                justify-content: center;

                &>div {
                    height: 95%;
                    width: 90%
                }
            }
        }

        .right {
            .registration-num-echart {
                background: url("~@/assets/big/border-right-one.png") no-repeat;
                background-size: 100% 100%;
                height: 360px;
                display: flex;
                align-items: flex-end;
                justify-content: center;

                &>div {
                    height: 95%;
                    width: 90%
                }
            }

            .status-echart {
                height: 500px;
                background: url("~@/assets/big/border-right-two.png") no-repeat;
                background-size: 100% 100%;
                display: flex;
                align-items: flex-end;
                justify-content: center;

                &>div {
                    height: 95%;
                    width: 90%
                }
            }
        }
    }
}
</style>